import React, { Component } from 'react';
import { View, Text, Dimensions, PanResponder, UIManager, findNodeHandle, Animated } from 'react-native';
import { getPixel } from '../common/utils'

export default class Test extends Component {
    // 高度随内容变化的剧情滑板 
    // 比上面那个还要难理解 你注意吧 
    pan7 = PanResponder.create({
        onMoveShouldSetPanResponder: (evt, gestureState) => {
            if (Math.abs(gestureState.dx) >= 1 && Math.abs(gestureState.dy) <= 3) {
                return true
            }
            return false
        },
        onPanResponderTerminate: (evt, gestureState) => {
            // 不切换
            // 还原
            Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                    toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                    duration: 0,              // 让动画持续一段时间
                    useNativeDriver: true
                }
            ).start();
            Animated.timing(                  // 随时间变化而执行动画
                this.state.detailAnim,            // 动画中的变量值
                {
                    toValue: 0,                   // 透明度最终变为1，即完全不透明
                    duration: 300,              // 让动画持续一段时间
                    useNativeDriver: true
                }
            ).start();
            if (this.state.whichBox == 1) {
                this._moveBox.setNativeProps({
                    style: { height: this.state.firstHeight }
                })
            } else if (this.state.whichBox == 2) {
                this._moveBox.setNativeProps({
                    style: { height: this.state.secHeight }
                })
            } else {
                this._moveBox.setNativeProps({
                    style: { height: this.state.zeroHeight }
                })
            }
        },
        onPanResponderMove: (evt, gestureState) => {
            let temp1 = 0
            let temp2 = 0
            if (gestureState.dx > 0) {
                temp1 = gestureState.dx >= 100 ? 100 : gestureState.dx
            } else {
                temp2 = gestureState.dx <= -100 ? -100 : gestureState.dx
            }
            // 1板子在中间
            if (this.state.whichBox == 1) {
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: temp2 / 100 * (this.state.firstHeight - this.state.secHeight) + this.state.firstHeight }
                    })
                } else {
                    // 右滑
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: -temp1 / 100 * (this.state.firstHeight - this.state.zeroHeight) + this.state.firstHeight }
                    })
                }
            } else if (this.state.whichBox == 2) {
                // 第二个板子在中间
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: temp2 / 100 * (this.state.secHeight - this.state.zeroHeight) + this.state.secHeight }
                    })
                } else {
                    // 右滑
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: -temp1 / 100 * (this.state.secHeight - this.state.firstHeight) + this.state.secHeight }
                    })
                }
            } else {
                // 第0个板子在中间
                if (gestureState.dx < 0) {
                    // 左滑
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot1.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: temp2 / 100 * (this.state.zeroHeight - this.state.firstHeight) + this.state.zeroHeight }
                    })
                } else {
                    // 右滑
                    this._detailPlot0.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._detailPlot2.setNativeProps({
                        style: { translateX: gestureState.dx }
                    })
                    this._moveBox.setNativeProps({
                        style: { height: -temp1 / 100 * (this.state.zeroHeight - this.state.secHeight) + this.state.zeroHeight }
                    })
                }
            }
        },
        onPanResponderRelease: (evt, gestureState) => {
            if (gestureState.dx >= 100 || gestureState.dx <= -100) {
                // 确认切换
                if (gestureState.dx < 0) {
                    // 往左滑
                    if (this.state.whichBox == 1) {
                        // 第一个板子 
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: 0,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ zeroIndex: (this.state.index + 2) % this.props.detailPlotNumber, whichBox: 2, index: (this.state.index + 1) % this.props.detailPlotNumber })
                                this.props.updateAnswers((this.state.index + 1) % this.props.detailPlotNumber)
                                this._detailPlot0.setNativeProps({
                                    style: { left: this.state.width }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: -this.state.width }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: 0 }
                                })
                            });

                        });

                        this._moveBox.setNativeProps({
                            style: { height: this.state.secHeight }
                        })

                    } else if (this.state.whichBox == 2) {
                        // 第二个板子
                        this._moveBox.setNativeProps({
                            style: { height: this.state.zeroHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: 0,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ firstIndex: (this.state.index + 2) % this.props.detailPlotNumber, whichBox: 0, index: (this.state.index + 1) % this.props.detailPlotNumber })
                                this.props.updateAnswers((this.state.index + 1) % this.props.detailPlotNumber)
                                this._detailPlot0.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: this.state.width }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: -this.state.width }
                                })
                            });

                        });
                    } else {
                        // 第0个板子         
                        this._moveBox.setNativeProps({
                            style: { height: this.state.firstHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: -this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ secIndex: (this.state.index + 2) % this.props.detailPlotNumber, whichBox: 1, index: (this.state.index + 1) % this.props.detailPlotNumber })
                                this.props.updateAnswers((this.state.index + 1) % this.props.detailPlotNumber)

                                this._detailPlot0.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                            });

                        });

                    }
                } else {
                    // 往右滑
                    if (this.state.whichBox == 1) {
                        // 第一个板子
                        this._moveBox.setNativeProps({
                            style: { height: this.state.zeroHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ secIndex: ((this.state.index - 2) + this.props.detailPlotNumber) % this.props.detailPlotNumber, whichBox: 0, index: (this.state.index - 1 + this.props.detailPlotNumber) % this.props.detailPlotNumber })
                                this.props.updateAnswers((this.state.index - 1 + this.props.detailPlotNumber) % this.props.detailPlotNumber)

                                this._detailPlot0.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                            });
                        });


                    } else if (this.state.whichBox == 2) {
                        // 第二个板子
                        this._moveBox.setNativeProps({
                            style: { height: this.state.firstHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true

                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ zeroIndex: ((this.state.index - 2) + this.props.detailPlotNumber) % this.props.detailPlotNumber, whichBox: 1, index: (this.state.index - 1 + this.props.detailPlotNumber) % this.props.detailPlotNumber })
                                this.props.updateAnswers((this.state.index - 1 + this.props.detailPlotNumber) % this.props.detailPlotNumber)

                                this._detailPlot0.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                            });
                        });
                    } else {
                        // 第0个板子
                        this._moveBox.setNativeProps({
                            style: { height: this.state.secHeight }
                        })
                        Animated.timing(                  // 随时间变化而执行动画
                            this.state.detailAnim,            // 动画中的变量值
                            {
                                toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                duration: 0,              // 让动画持续一段时间
                                useNativeDriver: true
                            }
                        ).start(() => {
                            Animated.timing(                  // 随时间变化而执行动画
                                this.state.detailAnim,            // 动画中的变量值
                                {
                                    toValue: this.state.width,                   // 透明度最终变为1，即完全不透明
                                    duration: 300,              // 让动画持续一段时间
                                    useNativeDriver: true
                                }
                            ).start(() => {
                                Animated.timing(                  // 随时间变化而执行动画
                                    this.state.detailAnim,            // 动画中的变量值
                                    {
                                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                                        duration: 0,              // 让动画持续一段时间
                                        useNativeDriver: true
                                    }
                                ).start();
                                this.setState({ firstIndex: ((this.state.index - 2) + this.props.detailPlotNumber) % this.props.detailPlotNumber, whichBox: 2, index: (this.state.index - 1 + this.props.detailPlotNumber) % this.props.detailPlotNumber })
                                this.props.updateAnswers( (this.state.index - 1 + this.props.detailPlotNumber) % this.props.detailPlotNumber)

                                this._detailPlot0.setNativeProps({
                                    style: { left: this.state.width, translateX: 0 }
                                })
                                this._detailPlot1.setNativeProps({
                                    style: { left: -this.state.width, translateX: 0 }
                                })
                                this._detailPlot2.setNativeProps({
                                    style: { left: 0, translateX: 0 }
                                })
                            });
                        });
                    }
                }
            } else {
                // 不切换
                // 还原
                Animated.timing(                  // 随时间变化而执行动画
                    this.state.detailAnim,            // 动画中的变量值
                    {
                        toValue: gestureState.dx,                   // 透明度最终变为1，即完全不透明
                        duration: 0,              // 让动画持续一段时间
                        useNativeDriver: true
                    }
                ).start(() => {
                    Animated.timing(                  // 随时间变化而执行动画
                        this.state.detailAnim,            // 动画中的变量值
                        {
                            toValue: 0,                   // 透明度最终变为1，即完全不透明
                            duration: 300,              // 让动画持续一段时间
                            useNativeDriver: true
                        }
                    ).start();
                });

                if (this.state.whichBox == 1) {
                    this._moveBox.setNativeProps({
                        style: { height: this.state.firstHeight }
                    })
                } else if (this.state.whichBox == 2) {
                    this._moveBox.setNativeProps({
                        style: { height: this.state.secHeight }
                    })
                } else {
                    this._moveBox.setNativeProps({
                        style: { height: this.state.zeroHeight }
                    })
                }
            }
        }
    })

    constructor(props) {
        super(props);
        this.state = {
            // 集数 从0开始
            index: 0,
            whichBox: 1,
            // 三个班子对应的高度
            zeroHeight: 0,
            firstHeight: 0,
            secHeight: 0,
            // 剧情板子对应的index
            zeroIndex: this.props.detailPlotNumber - 1,
            firstIndex: 0,
            secIndex: 1,

            // 分集剧情组件
            width: Dimensions.get('window').width,

            // 动画参数
            detailAnim: new Animated.Value(0),

            // 第一个剧情板子第一次设置moveBox高度
            isFirstRefresh: true
        };
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.zeroIndex !== nextState.zeroIndex) {
            return true
        }
        if (this.state.firstIndex !== nextState.firstIndex) {
            return true
        }
        if (this.state.secIndex !== nextState.secIndex) {
            return true
        }
        return false;
    }

    render() {
        return (
            <Animated.View key='detailSwiper' {...this.pan7.panHandlers} style={{ width: '100%' }}>
                <Animated.View ref={ref => this._moveBox = ref} style={{ width: '100%', position: 'relative' }}>

                    {/* 剧情第0个板子 */}
                    <Animated.View ref={ref => this._detailPlot0 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', position: 'absolute', left: -this.state.width }} onLayout={() => {
                        let handle0 = findNodeHandle(this._detailPlot0);
                        UIManager.measure(handle0, (x, y, width, height, pageX, pageY) => {
                            this.setState({ zeroHeight: height })
                        })
                    }} >
                        <Text style={{ fontSize: 16 }}>{this.props.detailPlots[this.state.zeroIndex].question}</Text>
                    </Animated.View>

                    {/* 剧情第一个板子 */}
                    <Animated.View ref={ref => this._detailPlot1 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', left: 0 }} onLayout={() => {
                        let handle = findNodeHandle(this._detailPlot1);
                        UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
                            if (this.state.isFirstRefresh) {
                                this._moveBox.setNativeProps({
                                    style: { height: height }
                                })
                                this._detailPlot1.setNativeProps({ style: { position: 'absolute' } })
                                this.setState({ isFirstRefresh: false, firstHeight: height })
                            } else {
                                this.setState({ firstHeight: height })
                            }
                        })
                    }} >
                        <Text style={{ fontSize: 16 }}>{this.props.detailPlots[this.state.firstIndex].question}</Text>
                    </Animated.View>

                    {/* 剧情第二个板子 */}
                    <Animated.View ref={ref => this._detailPlot2 = ref} style={{ paddingHorizontal: getPixel(10), borderRadius: 6, translateX: this.state.detailAnim, paddingVertical: 10, width: '100%', backgroundColor: '#FFD39B', position: 'absolute', left: this.state.width }} onLayout={() => {
                        let handle2 = findNodeHandle(this._detailPlot2);
                        UIManager.measure(handle2, (x, y, width, height, pageX, pageY) => {
                            this.setState({ secHeight: height })
                        })
                    }}>
                        <Text style={{ fontSize: 16 }}>{this.props.detailPlots[this.state.secIndex].question}</Text>
                    </Animated.View>
                </Animated.View >

            </Animated.View>
        );
    }

}
